<template>
  <div class="GiftDeduction">
    <el-card>
      <div class="one">
        <el-date-picker
          v-model="dataTimeVal"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <div class="search">
          <el-input placeholder="请输入用户ID" v-model="user">
            <template slot="prepend">用户ID</template>
          </el-input>
          <el-input placeholder="请输入手机号" v-model="input">
            <template slot="prepend">手机号</template>
          </el-input>
        </div>
        <el-button @click="serach" class="btn">搜索</el-button>
      </div>
      <!-- 选项卡 -->
      <el-radio-group @change="check" v-model="radio1">
        <el-radio-button label="赠送金币"></el-radio-button>
        <el-radio-button label="赠送宝石"></el-radio-button>
        <el-radio-button label="赠送VIP"></el-radio-button>
        <el-radio-button label="扣除"></el-radio-button>
      </el-radio-group>
      <el-button @click="excel" style="float: right; margin: 20px"
        >导出Excel</el-button
      >
      <!-- 表格 -->
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="create_time" label="申请时间"> </el-table-column>
        <el-table-column
          prop="finance_approve_time"
          :label="radio1 == '扣除' ? '扣除时间' : '赠送时间'"
        >
        </el-table-column>
        <el-table-column
          prop="id_code"
          :label="radio1 == '扣除' ? '扣除对象ID' : '赠送对象ID'"
        >
        </el-table-column>
        <el-table-column
          prop="nick_name"
          :label="radio1 == '扣除' ? '扣除对象昵称' : '赠送对象昵称'"
        >
        </el-table-column>
        <el-table-column
          v-if="radio1 == '赠送VIP'"
          prop="vip_time_limit"
          label="赠送类型"
        >
          <template slot-scope="scope">
            {{
              scope.row.vip_time_limit == "1"
                ? "月度"
                : scope.row.vip_time_limit == "2"
                ? "季度"
                : scope.row.vip_time_limit == "3"
                ? "年度"
                : ""
            }}
          </template>
        </el-table-column>
        <el-table-column v-if="radio1 == '扣除'" prop="type" label="扣除类型">
          <template slot-scope="scope">
            {{
              scope.row.type == "1"
                ? "金币"
                : scope.row.type == "2"
                ? "宝石"
                : "VIP"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="number" label="数量"> </el-table-column>
        <el-table-column
          prop="apply_reason"
          :label="radio1 == '扣除' ? '扣除理由' : '赠送理由'"
        >
        </el-table-column>
        <el-table-column prop="" label="审核记录">
          <template slot-scope="scope">
            <el-button size="small" @click="openDialog(scope.row)"
              >审核详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="page"
        :limit.sync="pageSize"
        @pagination="getList"
      />
    </el-card>
    <el-dialog title="审核详情" :visible.sync="dialogVisible" width="40%">
      <div>
        <p>主管审批信息</p>
        <el-form
          style="display: flex; flex-wrap: wrap; justify-content: space-around"
          :model="form"
        >
          <el-form-item label="审批人" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批时间" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录账号" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.num"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登陆IP" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.ip"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批结果" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.anser"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form.msg"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div>
        <p>财务审批信息</p>
        <el-form
          style="display: flex; flex-wrap: wrap; justify-content: space-around"
          :model="form1"
        >
          <el-form-item label="审批人" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批时间" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.time"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登录账号" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.num"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="登陆IP" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.ip"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="审批结果" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.anser"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="备注" :label-width="formLabelWidth">
            <el-input
              size="small"
              :disabled="true"
              v-model="form1.msg"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import { getGifList_api } from "@/api/PlatformManagemnt";
import moment from "moment";
export default {
  components: { Pagination },
  data() {
    return {
      dataTimeVal: "", //时间日期
      dataTimeValStartDate: "",
      dataTimeValEndDate: "",
      user: "",
      input: "",
      radio1: "赠送金币",
      tableData: [],
      loading: false,
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      pickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //   主管审批表单
      form: {
        name: "",
        time: "",
        num: "",
        ip: "",
        anser: "",
        msg: "",
      },
      formLabelWidth: "80px",

      // 财务审批表单
      form1: {
        name: "",
        time: "",
        num: "",
        ip: "",
        anser: "",
        msg: "",
      },
      dialogVisible: false,
      formLabelWidth: "80px",
    };
  },
  created() {
    this.getGitList();
  },
  methods: {
    //   导出Excel
    async excel() {
      if (this.radio1 == "赠送金币") {
        let res = await getGifList_api({
          type: 1,
          page: 1,
          pageSize: 10000,
          startTime: this.dataTimeValStartDate,
          endTime: this.dataTimeValEndDate,
          user_id: this.user,
          phone: this.input,
        });
        // console.log(res.data);
        const head = [
          "申请时间",
          "赠送时间",
          "赠送对象ID",
          "赠送对象昵称",
          "数量",
          "赠送理由",
        ];
        const fiald = [
          "create_time",
          "finance_approve_time",
          "id_code",
          "nick_name",
          "number",
          "apply_reason",
        ];
        this.$excel(res.data.list, head, fiald, `赠送金币记录`);
      } else if (this.radio1 == "赠送宝石") {
        let res = await getGifList_api({
          type: 2,
          page: 1,
          pageSize: 10000,
          startTime: this.dataTimeValStartDate,
          endTime: this.dataTimeValEndDate,
          user_id: this.user,
          phone: this.input,
        });
        const head1 = [
          "申请时间",
          "赠送时间",
          "赠送对象ID",
          "赠送对象昵称",
          "数量",
          "赠送理由",
        ];
        const fiald1 = [
          "create_time",
          "finance_approve_time",
          "id_code",
          "nick_name",
          "number",
          "apply_reason",
        ];
        this.$excel(res.data.list, head1, fiald1, `赠送宝石记录`);
      } else if (this.radio1 == "赠送VIP") {
        let res = await getGifList_api({
          type: 3,
          page: 1,
          pageSize: 10000,
          startTime: this.dataTimeValStartDate,
          endTime: this.dataTimeValEndDate,
          user_id: this.user,
          phone: this.input,
        });
        res.data.list.forEach((item) => {
          item.vip_time_limit == "1"
            ? (item.vip_time_limit = "月度")
            : item.vip_time_limit == "2"
            ? (item.vip_time_limit = "季度")
            : item.vip_time_limit == "3"
            ? (item.vip_time_limit = "年度")
            : (item.vip_time_limit = "");
        });
        const head2 = [
          "申请时间",
          "赠送时间",
          "赠送对象ID",
          "赠送对象昵称",
          "赠送类型",
          "数量",
          "赠送理由",
        ];
        const fiald2 = [
          "create_time",
          "finance_approve_time",
          "id_code",
          "nick_name",
          "vip_time_limit",
          "number",
          "apply_reason",
        ];
        this.$excel(res.data.list, head2, fiald2, `赠送VIP记录`);
      } else if (this.radio1 == "扣除") {
        let res = await getGifList_api({
          type: 4,
          page: 1,
          pageSize: 10000,
          startTime: this.dataTimeValStartDate,
          endTime: this.dataTimeValEndDate,
          user_id: this.user,
          phone: this.input,
        });
        res.data.list.forEach((item) => {
          item.type == "1"
            ? (item.type = "金币")
            : item.type == "2"
            ? (item.type = "宝石")
            : (item.type = "VIP");
        });
        const head3 = [
          "申请时间",
          "扣除时间",
          "扣除对象ID",
          "扣除对象昵称",
          "扣除类型",
          "数量",
          "扣除理由",
        ];
        const fiald3 = [
          "create_time",
          "finance_approve_time",
          "id_code",
          "nick_name",
          "type",
          "number",
          "apply_reason",
        ];
        this.$excel(res.data.list, head3, fiald3, `扣除记录`);
      }
    },
    // 打开审核详情弹出框
    openDialog(row) {
      this.dialogVisible = true;
      console.log(row, "999");
      this.form.ip = row.charge_ip;
      this.form.anser =
        row.charge_approve_state == "0"
          ? "未审核"
          : row.charge_approve_state == "1"
          ? "通过"
          : "驳回";
      this.form.time = row.charge_approve_time;
      this.form.name = row.charge_approve_name;
      this.form.num = row.charge_account;
      this.form.msg = row.charge_approve_state == "2" ? row.reject_reason : "";

      this.form1.name = row.finance_approve_name;
      this.form1.ip = row.finance_ip;
      this.form1.anser =
        row.finance_approve_state == "0"
          ? "未审核"
          : row.finance_approve_state == "1"
          ? "通过"
          : "驳回";
      this.form1.time = row.finance_approve_time;
      this.form1.name = row.finance_approve_name;
      this.form1.num = row.finance_account;
      this.form1.msg =
        row.finance_approve_state == "2" ? row.reject_reason : "";
    },
    getList() {
      this.getGitList();
    },
    serach() {
      this.getGitList();
    },
    //时间
    focus(time) {
      if (!this.dataTimeVal) {
        this.dataTimeVal = [];
      }
      this.dataTimeValStartDate = this.dataTimeVal[0];
      this.dataTimeValEndDate = this.dataTimeVal[1];
    },
    check() {
      //   console.log(this.radio1);
      this.getGitList();
    },
    // 获取列表
    async getGitList() {
      this.loading = true;
      let { code, data } = await getGifList_api({
        type:
          this.radio1 == "赠送金币"
            ? "1"
            : this.radio1 == "赠送宝石"
            ? "2"
            : this.radio1 == "赠送VIP"
            ? "3"
            : "4",
        page: this.page,
        pageSize: this.pageSize,
        startTime: this.dataTimeValStartDate,
        endTime: this.dataTimeValEndDate,
        user_id: this.user,
        phone: this.input,
      });
      if (code == 0) {
        console.log(data);
        this.tableData = data.list;
        this.total = parseInt(data.count);
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.GiftDeduction {
  margin: 30px;
  height: 100%;
  .one {
    display: flex;
    margin-bottom: 40px;
    .search {
      display: flex;
      margin-right: 30px;
      margin-left: 30px;
    }
    .el-input {
      width: 240px;
      margin-right: 20px;
    }
    .el-button {
      margin-left: 20px;
      height: 40px;
    }
  }
}
</style>